<template>
  <div>
    <el-backtop>
      <div
          style="{
            height: 100px;
            width: 100px;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0,0,0, .12);
            text-align: center;
            line-height: 40px; /* 修改为圆形的直径 */
            color: #1989fa;
            border-radius: 50%; /* 设置圆形 */
          }"
        >
          <i class="el-icon-top"></i>
      </div>

    </el-backtop>
    <search/>
    <el-row :gutter="20">
      <el-col :span="2">
          <div class="grid-content">
            
          </div>
      </el-col>
      <el-col :span="20">
          <div class="grid-content">
            <carousel/>
            <list/>
            <myfooter/>
          </div>
      </el-col>
      <el-col :span="2">
          <div class="grid-content">
            
          </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Carousel from './components/Carousel.vue'
import search from './components/search.vue'
import myMenu from './components/myMenu.vue'
import list from './components/list.vue'
import myfooter from './components/myfooter.vue'

export default {
  name: 'App',
  components: {
    Carousel,
    search,
    myMenu,
    list,
    myfooter
  }
}
</script>

<style scoped>
    .el-row {
      margin-bottom: 20px;
    }
    .el-row:last-child {
      margin-bottom: 0;
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
    .container {
      display: flex;
      justify-content: flex-end; /* 右对齐 */
    }
    
</style>
